<template>
	<view>
	    <!-- 顶部切换 -->
		<u-navbar :is-back="false" title="">
			<view class="content_top_box">
				<view class="topNav">
					<view class="nav_list" @click="videoPage">
						<text class="nav_list-text">视频</text>
					</view>
					<view class="nav_list" @click="dynamic">
						<text class="nav_list-text nav_list-active">动态</text>
					</view>
					<view class="nav_list" @click="friend">
						<text class="nav_list-text">好友</text>
					</view>
				</view>
				<image src="../../static/img/chat/sousuo3.png" class="sousuo-icon" style="width: 50rpx; height: 50rpx;"></image>
			</view>		
		</u-navbar>
	    
		<!-- 动态 -->
	    <view class="dynamic">
			<view class="dynamic-list">
				<view class="dynamic-list-tx">
					<image src="../../static/demo/1.jpg" class="tx-img"></image>
				</view>
				<view class="dynamic-list-body u-flex-1">
					<view class="dynamic-list-cont">
						<view class="name">附近的人一号</view>
						<view class="time">
							<text class="time-box">2分钟前</text> <text class="juli-box">>300m</text>
						</view>
						<view class="content">
							有人下来喝茶吗？有人下来喝茶吗？有人下来喝茶吗？有人下来喝茶吗？有人下来喝茶吗！！
						</view>
						<view class="dynamic-pic u-flex">
							<image src="../../static/demo/1.jpg" class="pic-img" mode="widthFix"></image>
							<image src="../../static/demo/1.jpg" class="pic-img" mode="widthFix"></image>
							<image src="../../static/demo/1.jpg" class="pic-img" mode="widthFix"></image>
						</view>
						<view class="dynamic-bottom">
							<view class="pinglun u-flex">
								<image src="../../static/img/index/pinglun3.png" class="function-icon"></image>
								<image src="../../static/img/index/pinglun2.png" class="function-icon"></image>10
							</view>
							<view class="pinglun u-flex">
								<image src="../../static/img/index/fenxiang1.png" class="function-icon"></image>
								<image src="../../static/img/index/fenxiang2.png" class="function-icon"></image> 5
							</view>
							<view class="pinglun u-flex">
								<image src="../../static/img/index/shoucang.png" class="function-icon"></image>
								<image src="../../static/img/index/shoucang2.png" class="function-icon"></image> 20
							</view>
						</view>
					</view>
				    <view class="dynamic-list-cont2">
						<view class="dynamic-list-tx">
							<image src="../../static/demo/1.jpg" class="tx-img"></image>
						</view>
						<view class="dynamic-list-cont u-flex-1">
							<view class="name name2">附近的人一号</view>
							<view class="content">
								有人下来喝茶吗？有人下来喝茶吗？有人下来喝茶吗？有人下来喝茶吗？有人下来喝茶吗！！
							</view>
							<view class="dynamic-bottom2 u-flex">
								<view class="huifu">
									5小时前
								</view>
								<view class="huifu">
									回复
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		    <view class="dynamic-list">
		    	<view class="dynamic-list-tx">
		    		<image src="../../static/demo/1.jpg" class="tx-img"></image>
		    	</view>
		    	<view class="dynamic-list-body u-flex-1">
		    		<view class="dynamic-list-cont">
						<view class="name">附近的人一号</view>
						<view class="time">
							<text class="time-box">2分钟前</text> <text class="juli-box">>300m</text>
						</view>
						<view class="content">
							有人下来喝茶吗？有人下来喝茶吗？有人下来喝茶吗？有人下来喝茶吗？有人下来喝茶吗！！
						</view>
						<view class="dynamic-pic u-flex">
							<image src="../../static/demo/1.jpg" class="pic-img" mode="widthFix"></image>
							<image src="../../static/demo/1.jpg" class="pic-img" mode="widthFix"></image>
							<image src="../../static/demo/1.jpg" class="pic-img" mode="widthFix"></image>
						</view>
						<view class="dynamic-bottom">
							<view class="pinglun u-flex">
								<image src="../../static/img/index/pinglun3.png" class="function-icon"></image>
								<image src="../../static/img/index/pinglun2.png" class="function-icon"></image>10
							</view>
							<view class="pinglun u-flex">
								<image src="../../static/img/index/fenxiang1.png" class="function-icon"></image>
								<image src="../../static/img/index/fenxiang2.png" class="function-icon"></image> 5
							</view>
							<view class="pinglun u-flex">
								<image src="../../static/img/index/shoucang.png" class="function-icon"></image>
								<image src="../../static/img/index/shoucang2.png" class="function-icon"></image> 20
							</view>
						</view>
					</view>
		    	    <view class="dynamic-list-cont2">
						<view class="dynamic-list-tx">
							<image src="../../static/demo/1.jpg" class="tx-img"></image>
						</view>
						<view class="dynamic-list-cont u-flex-1">
							<view class="name name2">附近的人一号</view>
							<view class="content">
								有人下来喝茶吗？有人下来喝茶吗？有人下来喝茶吗？有人下来喝茶吗？有人下来喝茶吗！！
							</view>
							<view class="dynamic-bottom2 u-flex">
								<view class="huifu">
									5小时前
								</view>
								<view class="huifu">
									回复
								</view>
							</view>
						</view>
					</view>
				</view>
		    </view>
		</view>
	
	</view>

</template>

<script>
	export default {
		data() {
			return {
				
				videoIndex:0,
				screenHeight: 1334,
				screenWidth: 0,
				statusBarHeight:0
			}
		},
		onLoad() {
			let systemInfo = uni.getSystemInfoSync();
			this.screenWidth = systemInfo.screenWidth;
			this.screenHeight = systemInfo.windowHeight;
			this.statusBarHeight = systemInfo.statusBarHeight;
			let iphoneXArr = ["iPhone X", "iPhone 11", "iPhone 11 Pro Max"];
			if(iphoneXArr.includes(systemInfo.model)){
				this.bottomBlackLineHeight = 40;
				this.progressBottom = 138;
			}
		},
		onReady() {
			
		},
		methods:{
			dynamic(){
				uni.navigateTo({
					url:'dynamic'
				})
			},
			friend(){
				uni.navigateTo({
					url:'friend'
				})
			},
			videoPage(){
				uni.switchTab({
					url:'index'
				})
			}
		}
	}
</script>

<style lang="scss">

.content_top_box{
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		flex-direction: row;
		align-items: center;
		height: 90rpx;
		padding-left: 80rpx;
		padding-right: 80rpx;
		width: 100%;
		background-color: #FFFFFF;
		box-shadow: 0px 3px 6rpx #EEEEEE;
		z-index: 99;
		
	}
	.topNav{
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}
	.nav_list{
		margin-left: 50rpx;
		margin-right: 50rpx;
		position: relative;
	}
	.nav_list-text{
		color: #9d9d9b;
		font-size: 34rpx;
		font-weight: 700;
	}
	.nav_list-active{
		color: #000;
	}
	.sousuo-icon{
		width: 50rpx;
		height: 50rpx;
		margin-left: 30rpx;
	}
	.nav_list-line{
		width: 40rpx;
		height: 4rpx;
		background-color: #ffffff;
		border-radius: 3rpx;
		position: absolute;
		left: 15rpx;
		bottom: -5px;
	}
.dynamic{
	padding-top: 0rpx;
	.dynamic-list{
		display: flex;
		padding: 35rpx 60rpx;
		align-items: flex-start;
		.dynamic-list-tx{
			width: 70rpx;
			margin-right: 30rpx;
			.tx-img{
				width: 70rpx;
				height: 70rpx;
				border-radius: 70rpx;
			}
		}
	    .dynamic-list-body{
			.name{
				color: #484848;
				font-size: 24rpx;
				font-weight: 700;
			}
			.time{
				margin: 15rpx 0;
				.time-box{
					font-weight: 700;
					color: #9b9b9b;
					font-size: 20rpx;
					margin-right: 30rpx;
				}
				.juli-box{
					color: #cdcdcd;
					font-weight: 700;
					font-size: 20rpx;
				}
			}
			.content{
				color: #515151;
				font-size: 24rpx;
			}
			.dynamic-pic{
				flex-wrap: wrap;
				margin: 20rpx 0;
				.pic-img{
					width: 150rpx;
					border-radius: 10rpx;
					margin-right: 15rpx;
				}
			}
			.dynamic-bottom{
				display: flex;
				justify-content: space-between;
				.pinglun{
					color: #cdcdcd;
					font-size: 20rpx;
					.function-icon{
						width: 32rpx;
						height: 32rpx;
						margin-right: 10rpx;
					}
				}
			}
		}
	}
}
.dynamic-list-cont2{
	display: flex;
	align-items: flex-start;
	padding: 30rpx 0 0;
	border-top: 2rpx solid #e4e4e4;
	margin-top: 30rpx;
	.content{
		margin: 15rpx 0;
	}
	.dynamic-bottom2{
		.name2{
			color: #898b8a;
		}
		
		.huifu{
			color: #898b8a;
			margin-right: 30rpx;
			font-size: 24rpx;
		}
	}
}
</style>
